<template>
  <view>
    <view class="flex-row bottom10 flex-wrap">
      <uni-tag v-for="(item,index) in timeList" :text="item.label" @click="setInverted(index,item.value)"
               :inverted="!item.check" :circle="true" type="success"/>
      <uni-easyinput v-model="timeValue" type="number" placeholder="1到999" @blur="input(timeValue)" @clear="clear"/>
    </view>
  </view>
</template>

<script>
export default {
  name: 'searchTime',//逾期时长
  computed: {},
  watch: {},
  data() {
    return {
      timeList: [
        {label: "7天内", value: 7, check: false},
        {label: "15天内", value: 15, check: false},
        {label: "30天内", value: 30, check: false},
        {label: "60天内", value: 60, check: false},
      ],
      timeValue: null
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    reset() {
      this.timeValue = null
      this.timeList = [
        {label: "7天内", value: 7, check: false},
        {label: "15天内", value: 15, check: false},
        {label: "30天内", value: 30, check: false},
        {label: "60天内", value: 60, check: false},
      ]
    },

    setInverted(index, val) {
      this.timeList.forEach((item, i) => {
        if (index === i) {
          item.check = !item.check
        } else {
          item.check = false
        }
      })
      this.$emit('dateChange', this.handleTime(val))
      this.timeValue = val
    },

    input(val) {
      const validValues = ['7', '15', '30', '60'];
      const validRange = val => val >= 1 && val <= 999;

      if (val === undefined || val === null) {
        this.$emit('dateChange', this.handleTime(0));
        return;
      }

      const value = String(val);

      if (!validRange(Number(value))) {
        this.timeValue = null;
        return;
      }

      if (validValues.includes(value)) {
        const index = this.timeList.findIndex(item => item.value === Number(value));
        if (index !== -1) {
          this.timeList.forEach(item => item.check = false);
          this.timeList[index].check = true;
        }
      } else {
        this.timeList.forEach(item => item.check = false);
      }

      this.$emit('dateChange', this.handleTime(Number(value)));
    },

    clear() {
      this.timeList.forEach(item => item.check = false);
      this.$emit('dateChange', {startTime: '', endTime: ''});
    },

    handleTime(val) {
      const now = new Date();
      const year = now.getFullYear();
      const month = this.padStart(now.getMonth() + 1);
      const day = this.padStart(now.getDate());
      const old = new Date(new Date().getTime() - val * 24 * 60 * 60 * 1000);

      const old_year = old.getFullYear();
      const old_month = this.padStart(old.getMonth() + 1);
      const old_day = this.padStart(old.getDate());
      const endTime = `${year}-${month}-${day}`;
      const startTime = `${old_year}-${old_month}-${old_day}`;

      return {startTime, endTime}

    },

    padStart(value) {
      return value.toString().padStart(2, '0');
    }
  },
};
</script>

<style scoped lang="scss">
uni-tag {
  margin: 20rpx 20rpx 10rpx 0
}
</style>


